<template>
    <div class="orders-page">
      <h1 class="page-title">订单列表</h1>
      <div class="orders-list">
        <OrderCard
          v-for="order in orders"
          :key="order.id"
          :order="order"
        />
      </div>
    </div>
  </template>
  
  <script>
  import { ref, onMounted } from 'vue';
  import OrderCard from './cus_card/OrderCard.vue'; // 引入订单卡片组件
  //import ordersData from './ordersData'; // 引入示例订单数据
  import { message } from 'ant-design-vue';
  import request from '../../util/request';
  
  export default {
    name: 'Orders',
    components: {
      OrderCard,
    },
    setup() {

      const orders = ref([]);

      onMounted(() => {
        request.post('order/my', {
          userid: sessionStorage.getItem('userid'),
          role: sessionStorage.getItem('role'),
        }).then(res => {
          const ol = res.data.ol;
          const pl = res.data.pl;
          orders.value = ol.map((o, i) => ({
            ...o,
            prodName: pl[i].prodName,
            prodPicture: pl[i].prodPicture,
            orderPrice: pl[i].prodPrice * o.orderBuyCount
          }));
          console.log(orders.value);
        }).catch(err => {
          message.error("获取订单失败：", err);
        });
      })

      return {
        orders,
      }
    }
  };
  </script>
  
  <style src="../../assets/styles/cusOrder.css" scoped></style>
  